<template>
  <diy-container
    :status="pageStatus"
    :border-bottom="false"
    :color="pageDetail.color"
    ref="container"
    :title="pageDetail.title"
    :headerVisable="true"
    :headerBackGroudColor="pageDetail.backgroundColor"
    :headerBackgroundImage="pageDetail.backgroundImage"
    :tabbarIsShow="true"
  >
    <view class="home-container">
      <view class="swiper-container padding-item">
        <u-swiper :list="swiperArr" :radius="15" @change="e => (current = e.current)">
          <view slot="indicator" class="indicator">
            <view
              class="indicator__dot"
              v-for="(item, index) in swiperArr"
              :key="index"
              :class="[index === current && 'indicator__dot--active']"
            ></view>
          </view>
        </u-swiper>
        <u-gap bgColor="transparent" height="15"></u-gap>
      </view>

      <view class="menus-container padding-item">
        <view class="menus-item" @click="menusClick(item)" v-for="(item, index) in menuBarArr" :key="index">
          <view class="menu-item-img">
            <img :src="item.img" alt="" class="img" />
          </view>
          <view class="menu-item-text">{{ item.text }}</view>
        </view>
      </view>

      <view class="diamond-container padding-item">
        <view
          class="diamond-item"
          :style="{ background: `linear-gradient(90deg,${item.bgColor} 100%)` }"
          v-for="(item, index) in diamondArr"
          :key="index"
        >
          <view class="title">{{ item.title }}</view>
          <view class="sum">{{ digitSum(item.sum) }}</view>
        </view>
      </view>

      <view class="switchTabs-container">
        <u-sticky bgColor="#fff">
          <u-tabs
            :list="switchTabsArr"
            :activeStyle="{
              color: '#303133',
              fontWeight: 'bold',
              transform: 'scale(1.05)'
            }"
            @change="tabsChange"
            :inactiveStyle="{
              color: '#606266',
              transform: 'scale(1)'
            }"
          ></u-tabs>
        </u-sticky>
        <personal-information />
      </view>
    </view>
  </diy-container>
</template>

<script>
import personalInformation from "components/personal-information/personal-information";

export default {
  components: { personalInformation },
  data() {
    return {
      current: 0,
      pageDetail: {
        title: "相亲交友平台",
        backgroundColor: "#ffffff",
        color: "rgb(51, 51, 51)",
        backgroundImage: ""
      },
      swiperArr: [
        "https://cdn.uviewui.com/uview/swiper/swiper2.png",
        "https://cdn.uviewui.com/uview/swiper/swiper1.png"
      ],
      menuBarArr: [
        {
          img: require("images/meus1.png"),
          text: "会员专区",
          url: "/pages/member/member"
        },
        {
          img: require("images/meus2.png"),
          text: "恋爱课堂"
        },
        {
          img: require("images/meus3.png"),
          text: "盲盒交友"
        },
        {
          img: require("images/meus4.png"),
          text: "防骗提醒"
        }
      ],
      diamondArr: [
        {
          title: "会员人数",
          sum: "56",
          bgColor: "#d6f7fe 0%,#eafdff"
        },
        {
          title: "男生",
          sum: "568",
          bgColor: "#ffd1db 0%,#ffe8ed"
        },
        {
          title: "女生",
          sum: "1556",
          bgColor: "#f5d1ff 0%,#fbe7ff"
        },
        {
          title: "成功脱单",
          sum: "1899",
          bgColor: "#ccf4c6 0%,#e6fbe2"
        }
      ],
      switchTabsArr: [
        {
          name: "置顶"
        },
        {
          name: "会员"
        },
        {
          name: "实名"
        },
        {
          name: "最新"
        }
      ]
    };
  },
  onLoad() {
    this.showPageLoading();
    this.getDiamondData();
  },
  methods: {
    getDiamondData() {
      //放入异步任务中完成取消loading
      this.showPageContent();
    },
    // tabs切换事件
    tabsChange(e) {},
    // 金刚位跳转事件
    menusClick(e) {
      if (e.url) {
        uni.navigateTo({
          url: e.url
        });
      } else {
        uni.showToast({
          title: "功能即将上线，敬请期待！",
          icon: "none"
        });
      }
    },
    digitSum(val) {
      if (!val) {
        return;
      }
      let sum = "" + val;
      if (sum.length >= 4) {
        return sum.slice(0, 1) + sum.split(1, 5);
      } else {
        return sum;
      }
    }
  }
};
</script>

<style scoped lang="scss">
.home-container {
  .padding-item {
    padding: 0 18px;
  }
  .swiper-container {
    .indicator {
      @include flex(row);
      justify-content: center;

      &__dot {
        height: 6px;
        width: 6px;
        border-radius: 100px;
        background-color: rgba(255, 255, 255, 0.35);
        margin: 0 5px;
        transition: background-color 0.3s;

        &--active {
          background-color: #ffffff;
        }
      }
    }
  }

  .menus-container,
  .diamond-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .menus-container {
    .menus-item {
      .menu-item-img {
        text-align: center;
        .img {
          width: 42px;
        }
      }
      .menu-item-text {
        font-size: 14px;
        color: #303133;
      }
    }
  }
  .diamond-container {
    margin-top: 10px;
    .diamond-item {
      flex: 1;
      padding: 10px;
      margin: 0 5.2px;
      border-radius: 10px;
      .title {
        font-size: 28rpx;
        color: #303133;
      }
      .sum {
        margin-top: 8px;
        font-weight: bold;
      }
    }
  }
  .switchTabs-container {
    /deep/ .u-tabs__wrapper__nav {
      .u-tabs__wrapper__nav__item {
        width: 25%;
        box-sizing: border-box;
      }
    }
  }
}
</style>
